<template>
  <div class="building-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <div class="search-label">楼宇名称：</div>
      <el-input
        v-model="params.name"
        placeholder="请输入内容"
        clearable
        class="search-main"
        @clear="clearable"
      />
      <el-button type="primary" @click.enter="buildingSearch">查询</el-button>
    </div>
    <!-- 添加楼宇 -->
    <el-button type="primary" @click="addForm">添加楼宇</el-button>

    <el-dialog :title="title" :visible.sync="dialogFormVisible">

      <el-form
        ref="addBuildingFrom"
        :model="buildingDetails"
        :rules="addFormRules"
        :label-position="labelPosition"
        label-width="500px"
      >
        <el-form-item
          label="楼宇名称"
          :label-width="formLabelWidth"
          prop="name"
        >
          <el-input v-model="buildingDetails.name" />
        </el-form-item>
        <el-form-item
          label="楼宇层数"
          :label-width="formLabelWidth"
          prop="floors"
        >
          <el-input v-model.number="buildingDetails.floors" />
        </el-form-item>
        <el-form-item
          label="在管面积"
          :label-width="formLabelWidth"
          prop="area"
        >
          <el-input v-model.number="buildingDetails.area">
            <template slot="append">m²</template>
          </el-input>
        </el-form-item>
        <el-form-item
          label="物业费"
          :label-width="formLabelWidth"
          prop="propertyFeePrice"
        >
          <el-input v-model.number="buildingDetails.propertyFeePrice">
            <template slot="append">元/m²</template>
          </el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addBuilding">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 表格区域 -->
    <div class="table" style="height : 2000vh">
      <el-table style="width: 100%" :data="list">
        <el-table-column type="index" label="序号" :index="indexMethod" />
        <el-table-column label="楼宇名称" prop="name" width="180" />
        <el-table-column label="层数" prop="floors" />
        <el-table-column label="在管面积(m²)" width="120" prop="area" />
        <el-table-column
          label="物业费(元/m²)"
          width="120"
          prop="propertyFeePrice"
        />
        <el-table-column label="状态" prop="status" :formatter="formatter">
          <!-- <template #default="sta">
            {{ buildingState(sta.row.status) }}
          </template> -->
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button size="mini" type="text" @click="editBuilding(scope.row.id)">编辑</el-button>
            <el-button size="mini" type="text" @click="romoveBuilding(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
        <!-- 分页器 -->
      </el-table>
      <div class="block" style="float: right">
        <el-pagination
          background
          :page-sizes="[10, 50, 20, 10]"
          :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getBuildingAPI, addBuildingAPI, inquireBuildingAPI, editBuildingAPI, romoveBuildingDetaAPI } from '@/api/building'
export default {
  name: 'Building',
  data() {
    const validateNumber = (rule, value, callback) => {
      console.log('value:' + value)
      if (!(/^\.+|[^\d.]/g).test(value)) {
        callback(new Error('请输入数字值'))
      } else {
        callback()
      }
    }
    return {
      //! 改变标题状态
      title: '',
      //! 分页数据
      params: {
        name: '',
        page: 1,
        pageSize: 10
      },
      list: [],
      total: 1,
      // ! 添加楼宇
      labelPosition: 'top', //! 改变标题位置
      dialogFormVisible: false, // !弹框是否显示
      formLabelWidth: '70px', // ! 宽度
      //! 楼宇数据
      buildingDetails: {
        name: '', //! 楼宇名称
        floors: '', //! 楼宇层数
        area: '', //! 在管面积
        propertyFeePrice: ''//! 物业费单价
      },
      //! 楼宇表单校验
      addFormRules: {
        name: [
          { required: true, message: '请输入楼宇名称', trigger: 'blur' }
        ],
        floors: [
          { required: true, message: '请输入楼宇层数', trigger: 'blur' },
          { validator: validateNumber, trigger: 'blur' }
        ],
        area: [
          { required: true, message: '请输入楼宇面积', trigger: 'blur' }
        ],
        propertyFeePrice: [
          { required: true, message: '请输入楼宇物业费', trigger: 'blur' }
        ]
      }

    }
  },
  mounted() {
    this.getBuildingList()
    // this.buildingState()
  },
  methods: {
    //! 获取数据
    async getBuildingList() {
      const res = await getBuildingAPI(this.params)
      // console.log(res.data.rows)
      this.list = [...res.data.rows]
      this.total = res.data.total
    },
    //! 改变状态
    // buildingState(sta) {
    //   // console.log(sta.row.status)
    //   const map = {
    //     0: '闲置中',
    //     1: '租赁中'
    //   }
    //   console.log(map)
    //   return map[sta]
    // },
    formatter(row) {
      // console.log(row.status)
      // if (row.status) {
      //   return '租赁中'
      // } else {
      //   return '闲置中'
      // }
      // console.log(row.status)
      return row.status ? '租赁中' : '闲置中'
      // console.log(column)
    },
    //! 分页器
    handleSizeChange(val) {
      // console.log(`当: ${val}`)
      this.params.pageSize = val
      this.getBuildingList()
    },
    handleCurrentChange(val) {
      this.params.page = val
      this.getBuildingList()
    },
    //! 自定义索引
    indexMethod(index) {
      // console.log(index * this.params.page)
      return index + 1 + (this.params.page - 1) * this.params.pageSize
    },
    //! 清空模块
    clearable() {
      this.params.name = ''
      this.params.page = 1
      this.getBuildingList()
    },
    //! 搜索模块
    buildingSearch() {
      this.getBuildingList(this.params)
    },
    //! 新增模块
    addBuilding() {
      this.$refs.addBuildingFrom.validate(async valid => {
        if (valid) {
          this.dialogFormVisible = false
          if (this.buildingDetails.id) {
            await editBuildingAPI(this.buildingDetails)
          } else {
            await addBuildingAPI(this.buildingDetails)
          }
          this.buildingDetails = {}
          this.getBuildingList()
        }
      })
    },
    //! 编辑模块
    async editBuilding(i) {
      this.dialogFormVisible = true //! 打开弹窗
      this.title = '编辑楼宇'
      // console.log(id)
      const res = await inquireBuildingAPI(i)
      console.log(res.data)
      const { id, name, floors, area, propertyFeePrice } = res.data
      this.buildingDetails = { id, name, floors, area, propertyFeePrice }
    },
    //! 删除模块
    async romoveBuilding(id) {
      // console.log(id)
      // const res = await romoveBuildingDetaAPI(id)
      // console.log(res)
      // await romoveBuildingDetaAPI(id)
      // this.getBuildingList()
      this.$confirm('确认删除当前楼宇吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await romoveBuildingDetaAPI(id)
        this.getBuildingList()
      }).catch(() => {

      })
    },
    //! 点击添加楼宇模块
    addForm() {
      this.dialogFormVisible = true
      this.title = '添加楼宇'
      this.buildingDetails = {}
    }
  }
}
</script>

<style lang="scss" scoped>
.department-container {
  padding: 10px;
}
.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, 0.9);
  padding-bottom: 20px;
  .search-label {
    width: 100px;
  }
  .search-main {
    width: 220px;
    margin-right: 10px;
  }
}
</style>
